<template>
  <div>
    <van-nav-bar title="新的检测" left-text="返回" left-arrow @click-left="backAction"/>

    <van-cell>{{ this.cur_question.title }}</van-cell>

    <van-cell id="question-content">{{ cur_question.content }}</van-cell>
    <van-radio-group id="radio-group" v-model="cur_option">
      <van-radio v-for="question in cur_question.options" :key="question.index"
                 id="options" :name="question.id"> {{ question.content }}
      </van-radio>
    </van-radio-group>

    <div>
      <van-button id="btn_pre" round @click="preQuestion">上一题</van-button>

      <van-button style="margin-left: 100px" id="btn_next" round @click="nextQuestion">下一题</van-button>
    </div>

    <van-progress id="progress-bar1" :percentage="(has_answer+1)/all_nums*100"
                  stroke-width="0"
                  text-color="green"
                  pivot-color="white"
                  :pivot-text="pivot_text"/>

    <van-progress id="progress-bar" :percentage="(has_answer+1)/all_nums*100"
                  :show-pivot="false"/>

    <van-progress id="progress-bar2" :percentage="100"
                  stroke-width="0"
                  text-color="grey"
                  pivot-color="white"
                  :pivot-text="pivot_text_all"/>
  </div>

</template>

<script>
import Vue from "vue"
import {Button, Dialog, NavBar, Progress, Radio, RadioGroup} from "vant"
import questionList from "@/assets/questionList";
import axios from "axios";

Vue.use(Progress)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Button)
Vue.use(NavBar)
export default {
  name: "queAnswer",

  data() {
    return {
      all_nums: null,
      has_answer: 0,

      survey_answer: [],
      survey_point: [],
      survey_result: null,

      question_type: null,

      questions: null,
      cur_option: null,
      cur_question: null,

      pivot_text: null,
      pivot_text_all: null,
    }
  },

  created() {
    this.question_type = this.$route.query.question_type;
    this.questions = questionList[this.question_type].content;

    this.cur_question = this.questions[this.has_answer];
    this.all_nums = this.questions.length;

    this.pivot_text = "第" + (this.has_answer + 1) + "题";
    this.pivot_text_all = "共" + (this.all_nums) + "题";
    Dialog.alert({
      title: questionList[this.question_type].desc,
      message: questionList[this.question_type].info
    })
  },

  methods: {

    nextQuestion() {
      let that = this;
      if (that.cur_option === null) {
        Dialog.alert({
          title: "小提示",
          message: "请先选择一项后再进行下一题^_^"
        })
        return;
      }

      that.has_answer++;
      that.survey_answer.push(that.cur_option);

      for (let i = 0; i < that.cur_question.options.length; i++) {
        if (that.cur_option === that.cur_question.options[i].id) {
          that.survey_point.push(that.cur_question.options[i].points);
        }
      }

      this.pivot_text = "第" + (this.has_answer + 1) + "题";
      if (that.all_nums === that.has_answer) {
        Dialog.confirm({
          title: "小提示",
          message: "您确定要提交吗^_^"
        }).then(function () {
          // if is simple question, skip add record to server
          if (sessionStorage.getItem("is_simple") === '1') {
            that.getSurveyResult();
            that.$router.push({
              name: "queResult_Simple",
              query: {
                survey_result: that.survey_result,
              }
            });
          } else {
            that.addRecord();
            that.$router.push({
              name: "queResult",
              query: {
                question_type: that.question_type,
                survey_answer: that.survey_answer,
                survey_point: that.survey_point
              }
            });
          }
        })
        return;
      }

      that.cur_question = that.questions[that.has_answer];

      that.cur_option = null;
      if (that.all_nums - 1 === that.has_answer) {
        (document.getElementById("btn_next")).innerText = "完成问卷";
      }

    },
    preQuestion() {
      let that = this;
      if (that.has_answer === 0) {
        Dialog.alert({
          title: "小提示",
          message: "这是第一题，前面没有更多的题目啦^-^"
        })
        return;
      }
      that.has_answer--;
      that.cur_option = that.survey_answer.pop();
      that.survey_point.pop();

      this.pivot_text = "第" + (this.has_answer + 1) + "题";

      that.cur_question = that.questions[that.has_answer];
    },
    addRecord() {
      this.getSurveyResult();
      axios.get("http://qcjc.caulife.top/api/v1/addRecord", {
        params: {
          fam_id: sessionStorage.getItem("respondent_id"),
          fam_name: sessionStorage.getItem("respondent_name"),
          survey_answer: this.survey_answer.toString(),
          survey_point: this.survey_point.toString(),
          survey_result: this.survey_result,
          question_type: 0
        }
      })
    },
    getSurveyResult() {
      let A = 578;
      let C1 = A * 30 / 100;
      let C2 = A * 60 / 100;
      this.survey_result = 0;
      let sum = 0;
      for (let i = 0; i < this.survey_point.length; i++) {
        sum += parseInt(this.survey_point[i]);
      }
      if (sum > C1)
        this.survey_result = 1;
      if (sum > C2)
        this.survey_result = 2;

      if (this.question_type === 1) {
        this.survey_result = 0;
        if (sum > 20)
          this.survey_result = 1;
        if (sum > 50)
          this.survey_result = 2;
      }
    },
    backAction() {
      Dialog.confirm({
        title: "小提示",
        message: "问卷尚未答完，您确定要退出吗?"
      }).then(
          function () {
            history.back();
          })
    }
  }
}
</script>

<style scoped>
div {
  align-content: center;
}

#radio-group {
  align-items: center;
  margin: 20px 50px 20px 20px;
}

#options {
  margin: 10px 10px 10px 10px;
}


#progress-bar {
  margin: 28px 20px 20px 20px;
}


#progress-bar1 {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>